<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>邮箱验证码</title>
    <style>
        body, table, td, a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        table, td {
            mso-table-lspace: 0;
            mso-table-rspace: 0;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        /* 容器 */
        body {
            background-color: #f4f6fb;
            font-family: PingFang SC, Helvetica, Arial, "Microsoft YaHei", sans-serif;
        }

        .email-wrapper {
            width: 100%;
            background: #f4f6fb;
            padding: 24px 0;
        }

        .email-content {
            max-width: 600px;
            margin: 0 auto;
        }

        /* 卡片 */
        .card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 24px rgba(32, 41, 60, 0.08);
            overflow: hidden;
        }

        .card-header {
            gap: 5px;
            align-items: center;
            padding: 20px;
            display: flex;
            justify-content: center;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
            color: white;
        }

        .brand {
            display: inline-block;
            vertical-align: middle;
            font-weight: 700;
            font-size: 20px;
        }

        .card-body {
            padding: 28px;
            color: #0f172a;
        }

        .greeting {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .instruction {
            font-size: 14px;
            color: #475569;
            margin-bottom: 18px;
            line-height: 1.5;
        }

        /* 验证码样式 */
        .code-box {
            text-align: center;
            margin: 20px 0;
        }

        .code {
            font-size: 20px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            height: 18px;
            letter-spacing: 6px;
            color: #3b82f6;
            background: #f1f5f9;
            border-radius: 10px;
            font-weight: bold;
        }

        .expire {
            text-align: center;
            color: #64748b;
            font-size: 13px;
            margin-top: 8px;
        }

        .help {
            font-size: 13px;
            color: #94a3b8;
            margin-top: 18px;
        }

        .footer {
            text-align: center;
            padding: 18px;
            font-size: 12px;
            color: #94a3b8;
        }

        @media (max-width: 420px) {
            .card-header {
                padding: 22px;
            }

            .card-body {
                padding: 20px;
            }

            .code {
                font-size: 20px;
                padding: 10px 18px;
            }
        }
    </style>
</head>
<body>
<div class="email-wrapper">
    <div class="email-content">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div class="card">
                        <div class="card-header">
                            <img width="30"
                                 src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzYyNTExNTU1NzM5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3MjYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTczNy4xMDEgODA3LjUzMSA5OTAuMjk3IDc4LjMwMSA3MTAuMDc4IDc5Ny4wODdaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzI3Ij48L3BhdGg+PHBhdGggZD0iTTc3Ni42NTcgODIyLjgxNiA5OTAuMjk3IDc4LjMwMSA3NTAuNjY0IDgxMi43NzhaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzI4Ij48L3BhdGg+PHBhdGggZD0iTTY5NS4xIDc5MS4zIDk5MC4yOTcgNzguMzAxIDY2OS42MTIgNzgxLjQ1NVoiIGZpbGw9IiMxMjk2ZGIiIHAtaWQ9IjE3MjkiPjwvcGF0aD48cGF0aCBkPSJNODI0LjIzNCA4NDEuMTk4IDg1Mi4xNjcgODUxLjk5IDk5MC4yOTcgNzguMzAxWiIgZmlsbD0iIzEyOTZkYiIgcC1pZD0iMTczMCI+PC9wYXRoPjxwYXRoIGQ9Ik04MTIuOTUxIDgzNi44MzUgOTkwLjI5NyA3OC4zMDEgNzg4Ljk4MiA4MjcuNTc2WiIgZmlsbD0iIzEyOTZkYiIgcC1pZD0iMTczMSI+PC9wYXRoPjxwYXRoIGQ9Ik00NTkuMzQ0IDcwMC4yMDkgOTkwLjI5NyA3OC4zMDEgNDI0LjgxOSA2ODYuODY2WiIgZmlsbD0iIzEyOTZkYiIgcC1pZD0iMTczMiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTAuMDAzIDcxOS43OSA5OTAuMjk3IDc4LjMwMSA0ODMuNTAyIDcwOS41NDlaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzMzIj48L3BhdGg+PHBhdGggZD0iTTY1My4xNDUgNzc1LjA5MSA5OTAuMjk3IDc4LjMwMSA2MjMuOTIyIDc2My43OTZaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzM0Ij48L3BhdGg+PHBhdGggZD0iTTYwNS43OTEgNzU2Ljc5MSA5OTAuMjk3IDc4LjMwMSA1NzkuNzU2IDc0Ni43MzhaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzM1Ij48L3BhdGg+PHBhdGggZD0iTTU1OS43NzkgNzM5LjAxNiA5OTAuMjk3IDc4LjMwMSA1MzIuMTQ2IDcyOC4zMzlaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzM2Ij48L3BhdGg+PHBhdGggZD0iTTM2LjYxNyA1MDQuMzI4IDM5MC4wMzUgNjU1Ljc3IDk0Ni41NTcgNjMuMzQ3WiIgZmlsbD0iIzEyOTZkYiIgcC1pZD0iMTczNyI+PC9wYXRoPjxwYXRoIGQ9Ik00MjUuMzMgOTU3LjUzIDYyMy45MjIgNzkxLjMgNDI1LjMzIDcxMy43MDlaIiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNzM4Ij48L3BhdGg+PC9zdmc+">
                            <div class="brand">[[${BRAND_NAME}]]</div>
                        </div>

                        <div class="card-body">
                            <div class="greeting">你好，</div>
                            <div class="instruction">你正在使用 <strong>[[${BRAND_NAME}]]</strong>
                                的邮箱验证功能。请在下方输入验证码以完成操作。若非你本人操作，请忽略此邮件。
                            </div>

                            <div class="code-box">
                                <div style="display: flex; align-items: center; justify-content: center; gap: 5px">
                                    <img width="45"
                                         src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzYyNTExOTY4NTA2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEzMzQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxNjIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjYwLjU0Njg3NSIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik0xMzE4Ljc4Nzg3OSA4MzcuODE4MTgyYzAgMjcuOTI3MjczLTYuMjA2MDYxIDU1Ljg1NDU0NS0yMS43MjEyMTIgNzcuNTc1NzU3TDg4NC4zNjM2MzYgNDUzLjA0MjQyNCAxMjkwLjg2MDYwNiA5OS4yOTY5N2MxNS41MTUxNTIgMjQuODI0MjQyIDI0LjgyNDI0MiA1NS44NTQ1NDUgMjQuODI0MjQyIDg2Ljg4NDg0OGwzLjEwMzAzMSA2NTEuNjM2MzY0eiBtLTY1MS42MzYzNjQtMjk3Ljg5MDkwOWw1NjcuODU0NTQ2LTQ5Ni40ODQ4NDlDMTIxMC4xODE4MTggMzEuMDMwMzAzIDExODUuMzU3NTc2IDIxLjcyMTIxMiAxMTU3LjQzMDMwMyAyMS43MjEyMTJIMTc5Ljk3NTc1OGMtMjcuOTI3MjczIDAtNTUuODU0NTQ1IDYuMjA2MDYxLTc3LjU3NTc1OCAyMS43MjEyMTJsNTY0Ljc1MTUxNSA0OTYuNDg0ODQ5eiBtMTU1LjE1MTUxNS0zMS4wMzAzMDNsLTEzMC4zMjcyNzIgMTE0LjgxMjEyMWMtMTUuNTE1MTUyIDE1LjUxNTE1Mi0zNy4yMzYzNjQgMTUuNTE1MTUyLTUyLjc1MTUxNiAwbC0xMzAuMzI3MjcyLTExNC44MTIxMjFMOTMuMDkwOTA5IDk3Ny40NTQ1NDVjMjQuODI0MjQyIDE1LjUxNTE1MiA1NS44NTQ1NDUgMjQuODI0MjQyIDg2Ljg4NDg0OSAyNC44MjQyNDNoOTc3LjQ1NDU0NWMzMS4wMzAzMDMgMCA1OC45NTc1NzYtOS4zMDkwOTEgODYuODg0ODQ5LTI0LjgyNDI0M0w4MjIuMzAzMDMgNTA4Ljg5Njk3ek00MC4zMzkzOTQgOTkuMjk2OTdDMjQuODI0MjQyIDEyNC4xMjEyMTIgMTUuNTE1MTUyIDE1NS4xNTE1MTUgMTUuNTE1MTUyIDE4My4wNzg3ODh2NjUxLjYzNjM2NGMwIDI3LjkyNzI3MyA2LjIwNjA2MSA1NS44NTQ1NDUgMjEuNzIxMjEyIDc3LjU3NTc1N2w0MTIuNzAzMDMtNDYyLjM1MTUxNUw0MC4zMzkzOTQgOTkuMjk2OTd6IiBmaWxsPSIjMDlhZWMwIiBwLWlkPSI0MTYzIj48L3BhdGg+PC9zdmc+">
                                    <div class="code">[[${CODE}]]</div>
                                </div>
                                <div class="expire">验证码将在 <strong>[[${EXPIRE_MINUTES}]] 分钟</strong> 后失效</div>
                            </div>

                            <div class="help">请将以下网站中使用验证码完成注册操作：<br/><a
                                    href="[[${VERIFY_URL}]]"
                                    style="color:#0ea5a5; word-break:break-all;">[[${VERIFY_URL}]]</a>
                            </div>
                            <div style="display: flex; justify-content: right; align-items: center; ">
                                <p style="font-size:13px;color:#aaa;margin: 0;">— 来自 [[${BRAND_NAME}]] 团队</p>
                                <img width="22"
                                     src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzYyNTEzMjMzNzQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU3MTIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMi4wMDEwMjMgODU3LjM4NjMwOGwtMy41NDM3MDktMy45MTMxMjNjLTYuMjM2MDI4LTEuMTY4NjE2LTEwLjIxNTY2Ni01LjM0Nzc5OC0xMS45Njg1ODktOS4yOTg3ODMtMC40NzM3OTEtMS4wNjUyNjItMC45MzkzOTUtMi40MzM0MjItMS4xOTExMjgtNC4wMzg5OS0zMy45OTgzMjUtMjcuMTI1ODAxLTE4OC4yMDEzNTktMTE5LjkwOTk5Ny0yODQuNDkxNDAzLTE3Ni4xMjEyM0MxMTYuNzQzODg4IDYwOS43ODUwOTQgNjUuMDU4NzM4IDUwNC44NTQyNTMgNzkuMjAxODUzIDM5Ni43Mjg2NWMxNS4yOTAyNDEtMTE2Ljc2NTM3NyAxMDcuMjQ1NTYtMjEwLjU3Nzk5NiAyMjMuNjM0MzYtMjI4LjExNjQ0MSA2NS4zMzI5ODQtOS44NDYyNTIgMTM1Ljg1ODIyNCAxNi45Mzk4MTEgMjA5LjE2NDgxIDc5LjYzMTY0MiA3My4zMjE5MzYtNjIuNjk4OTk0IDE0My44NDAwMTItODkuNTE0NzMzIDIwOS4xNjQ4MS03OS42MzE2NDIgMTE2LjQzOTk2NiAxNy41NTM3OTUgMjA4LjQwMzQ3IDExMS4zOTUwNjYgMjIzLjY0MTUyMyAyMjguMjEyNjMyIDE0LjEyMTYyNiAxMDguMjIxNzk0LTM3LjY3NDA0MSAyMTMuMTc0MTI0LTEzMS45Mzc5MzggMjY3LjM4MTcyMy05Ni4xMjczMzggNTYuMTE2MDY1LTI1MC4xOTAxNzkgMTQ4LjgxODM5Ny0yODQuMTY1OTkxIDE3NS45MjE2ODUtMC4yNTE3MzMgMS42MTI3MzEtMC43MTczMzggMi45ODA4OTEtMS4xOTExMjggNC4wMzg5OS0xLjc0NTc2IDMuOTQ5OTYyLTUuNzI1Mzk4IDguMTI5MTQ0LTExLjk2MTQyNiA5LjMwNTk0N0w1MTIuMDAxMDIzIDg1Ny4zODYzMDh6IiBmaWxsPSIjMDlhZWMwIiBwLWlkPSI1NzEzIj48L3BhdGg+PC9zdmc+"
                                     alt="">
                            </div>
                        </div>

                        <div class="footer">© [[${YEAR}]] [[${BRAND_NAME}]]。保留所有权利。</div>
                    </div>
                </td>
            </tr>
        </table>

        <div style="display:none; white-space:nowrap; font-size:1px; line-height:1px; color:#f4f6fb;">来自
            [[${BRAND_NAME}]] 的验证码：[[${CODE}]]（有效期 [[${EXPIRE_MINUTES}]] 分钟）
        </div>
    </div>
</div>
</body>
</html>
